<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型边框(box model border)</title>
  <!-- 
    CSS的盒子模型中的边框（Border）是指围绕在内容区域和内边距之外的线条或样式。在CSS中，可以通过设置边框的样式、颜色和宽度来定义元素的边框外观。
    以下是CSS盒子模型中边框的主要要点： 
 
      1. 边框样式（Border Style）：可以通过设置border-style属性来定义边框的样式，常见的样式包括实线（solid）、虚线（dashed）、双实线（double）等。 
      2. 边框颜色（Border Color）：可以通过设置border-color属性来指定边框的颜色，可以使用颜色名称、十六进制值或RGB值来定义颜色。 
      3. 边框宽度（Border Width）：可以通过设置border-width属性来定义边框的宽度，可以使用像素（px）、百分比（%）或其他单位来指定宽度。 
   -->
   <style>
     .border {
       width: 200px;
       height: 100px;

       /* 边框样式（Border Style） */
       border-top-style: solid;
       border-right-style: dashed;
       border-bottom-style: double;
       border-left-style: dotted;
       /* 缩写 */
       border-style: solid dashed double dotted;
       
       /* 边框颜色（Border Color） */
       border-top-color: red;
       border-right-color: green;
       border-bottom-color: blue;
       border-left-color: yellow;
       /* 缩写 */
       border-color: red green blue yellow;

       /* 边框宽度（Border Width） */
       border-top-width: 10px;
       border-right-width: 20px;
       border-bottom-width: 30px;
       border-left-width: 40px;
       /* 缩写 */
       border-width: 10px 20px 30px 40px;
     }
   </style>
</head>
<body>

  <div class="border">box model border</div>
  
</body>
</html>